<template><div>
                <div class="content__inner">
                    <header class="content__title">
                        <h1>Notifications and Alerts</h1>

                        <div class="actions">
                            <a href="" class="actions__item zmdi zmdi-trending-up"></a>
                            <a href="" class="actions__item zmdi zmdi-check-all"></a>

                            <div class="dropdown actions__item">
                                <i data-toggle="dropdown" class="zmdi zmdi-more-vert"></i>
                                <div class="dropdown-menu dropdown-menu-right">
                                    <a href="" class="dropdown-item">Refresh</a>
                                    <a href="" class="dropdown-item">Manage Widgets</a>
                                    <a href="" class="dropdown-item">Settings</a>
                                </div>
                            </div>
                        </div>
                    </header>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Notification</h2>
                            <small class="card-subtitle">Bootstrap Notify helps to turn standard bootstrap alerts into &#34;growl&#34; like notifications.</small>
                        </div>

                        <div class="card-block">
                            <h3 class="card-block__title">Positions</h3>

                            <div class="btn-demo notifications-demo mt-3">
                                <a href="" class="btn btn-secondary" data-type="inverse" data-from="top" data-align="left" data-icon="fa fa-check">Top Left</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-from="top" data-align="right" data-icon="fa fa-comments">Top Right</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-from="top" data-align="center" data-icon="fa fa-comments">Top Center</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-from="bottom" data-align="left">Bottom Left</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-from="bottom" data-align="right">Bottom Right</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-from="bottom" data-align="center">Bottom Center</a>
                            </div>

                            <br/>

                            <h3 class="card-block__title">Types</h3>

                            <div class="btn-demo notifications-demo mt-3">
                                <a href="" class="btn btn-secondary" data-type="inverse">Default</a>
                                <a href="" class="btn btn-info" data-type="info">Info</a>
                                <a href="" class="btn btn-success" data-type="success">Success</a>
                                <a href="" class="btn btn-warning" data-type="warning">Warning</a>
                                <a href="" class="btn btn-danger" data-type="danger">Danger</a>
                            </div>

                            <br/>

                            <h3 class="card-block__title">Custom animations</h3>

                            <div class="btn-demo notifications-demo mt-3">
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated fadeIn" data-animation-out="animated fadeOut">Fade In</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated fadeInLeft" data-animation-out="animated fadeOutLeft">Fade In Left</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated fadeInRight" data-animation-out="animated fadeOutRight">Fade In Right</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated fadeInUp" data-animation-out="animated fadeOutUp">Fade In Up</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated fadeInDown" data-animation-out="animated fadeOutDown">Fade In Down</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated bounceIn" data-animation-out="animated bounceOut">Bounce In</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated bounceInLeft" data-animation-out="animated bounceOutLeft">Bounce In Left</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated bounceInRight" data-animation-out="animated bounceOutRight">Bounce In Right</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated bounceInUp" data-animation-out="animated bounceOutUp">Bounce In Up</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated rotateInDownRight" data-animation-out="animated rotateOutUpRight">Fall In Right</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated rotateIn" data-animation-out="animated rotateOut">Rotate In</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated flipInX" data-animation-out="animated flipOutX">Flip In X</a>
                                <a href="" class="btn btn-secondary" data-type="inverse" data-animation-in="animated flipInY" data-animation-out="animated flipOutY">Flip In Y</a>
                            </div>
                        </div>
                    </div>

                    <div class="card">
                        <div class="card-header">
                            <h2 class="card-title">Custom Javascript Alerts</h2>
                            <small class="card-subtitle">SweetAlert 2 is beautiful replacement for javascript alert. SweetAlert automatically centers itself on the page and looks great no matter if you&#39;re using a desktop computer, mobile or tablet. It&#39;s even highly customizeable, as you can see below!</small>
                        </div>

                        <div class="card-block">
                            <h3 class="card-block__title">Basic examples</h3>
                            <p>Alerts can be customized to display custom variants using optional settings.</p>

                            <div class="btn-demo mt-4">
                                <button class="btn btn-primary mb-1" id="sa-basic">Basic Message</button>

                                <button class="btn btn-primary mb-1" id="sa-info">Info Message</button>

                                <button class="btn btn-primary mb-1" id="sa-success">Success Message</button>

                                <button class="btn btn-primary mb-1" id="sa-warning">Warning Message</button>

                                <button class="btn btn-primary mb-1" id="sa-question">Question</button>
                            </div>

                            <br/>
                            <br/>

                            <h3 class="card-block__title">Advanced examples</h3>

                            <br/>

                            <p>A warning message, with a function attached to the &#34;Confirm&#34;-button&#34;:</p>
                            <button class="btn btn-primary mb-1" id="sa-funtion">This ain&#39;t any normal browser alert</button>

                            <br/>
                            <br/>

                            <p>Auto closing alert with timer.</p>
                            <button class="btn btn-primary mb-1" id="sa-timer">Show me the timer alert</button>

                            <br/>
                            <br/>

                            <p>A message with custom Image Header</p>
                            <button class="btn btn-primary mb-1" id="sa-image">Custom headers are cool in an alert</button>

                        </div>
                    </div>
                </div>

                
            </div></template>